<template>
  <div class="app-container layout-container">
    <Breadcrumb />
    <div class="container">
      <div class="side">
        <div class="title app-container">
          <CustomTitle title="工程设置" />
        </div>
        <div class="side-list">
          <div
            v-for="(item, index) in menuList"
            :class="{ 'side-list-item': true, 'side-list-item-active': menuKey === item.key }"
            :key="item.key"
            @click="activeMenu(item, index)"
          >
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      <div class="list-content" ref="listContentRef">
        <micro-app
          v-if="isShowFlow"
          class="micro-app"
          name="form-engineeringSettings"
          :url="appUrlconfig.formDesign"
          baseroute="/form-design"
          default-page="/engineeringSettings"
          fiber
          :data="{ token: getToken(), engineeringConfig }"
          router-mode="native"
        />
        <component v-else :is="menuList[currentMenuIndex][menuKey]" :width="width - 40" @open-flow="handelOpenFlow" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import Process from "./components/process/index.vue";
import TaskTemplate from "./components/taskTemplate/index.vue";
import AuditConfig from "./components/auditConfig/index.vue";
import Duration from "./components/duration/index.vue";
import AnnexConfig from "./components/annexConfig/index.vue";
import ContractingMethod from "./components/contractingMethod/index.vue";
import MaterialConfiguration from "./components/materialConfiguration/index.vue";
import Acceptance from "./components/acceptance/index.vue";
import EngineeringQuantity from "./components/engineeringQuantity/index.vue";
import { useElementSize } from "@vueuse/core";
import appUrlconfig from "@/config/appUrlconfig";
import { getToken } from "@/utils/auth";
import { mainReceiveData } from "@/microApp/utils";

const listContentRef = ref();
const { width } = useElementSize(listContentRef);
/**侧边菜单 */
const menuList = [
  {
    key: "Process",
    label: "工程流程配置",
    Process: Process
  },
  {
    key: "TaskTemplate",
    label: "工程任务模板",
    TaskTemplate: TaskTemplate
  },
  {
    key: "AuditConfig",
    label: "工程审批配置",
    AuditConfig: AuditConfig
  },
  {
    key: "Duration",
    label: "工期配置",
    Duration: Duration
  },
  {
    key: "AnnexConfig",
    label: "工程资料配置",
    AnnexConfig: AnnexConfig
  },
  {
    key: "Acceptance",
    label: "验收标准配置",
    Acceptance: Acceptance
  },
  {
    key: "EngineeringQuantity",
    label: "工程核量设置",
    EngineeringQuantity: EngineeringQuantity
  },
  {
    key: "ContractingMethod",
    label: "发包配置",
    ContractingMethod: ContractingMethod
  },
  {
    key: "MaterialConfiguration",
    label: "材料配置",
    MaterialConfiguration: MaterialConfiguration
  }
];
const menuKey = ref("Process");
const currentMenuIndex = ref(0);
const activeMenu = (item, index) => {
  if (menuKey.value === item.key) return;
  menuKey.value = item.key;
  currentMenuIndex.value = index;
  isShowFlow.value = false;
};

/**
 * 流程配置
 */
const isShowFlow = ref(false);
const engineeringConfig = ref({});
const handelOpenFlow = item => {
  console.log(item);
  isShowFlow.value = true;
  engineeringConfig.value = item;
};
mainReceiveData("form-engineeringSettings", (data: any) => {
  console.log(data.engineeringSettingsBack);
  isShowFlow.value = data.engineeringSettingsBack;
});
</script>

<style scoped lang="scss">
@import "index";
</style>
